<template>
  <div class="first_echarts" id="sale1"></div>
</template>

<script setup lang="ts">
import {ref, onMounted} from 'vue';
import * as echarts from 'echarts';
const plateformMes = ref();
const xAxis = ref<any>([]);
const seriesData = ref<any>([]);
const shopId = localStorage.getItem('ShopId');
const props = defineProps({
  monthlyAllSalesInfo: Array,
  centerechartsHeight: String,
  centerchartsWidth: String,
});
onMounted(async () => {
  // followCountInfo关注人数
  // salesInfo销售额
  var chartDom = document.getElementById('sale1');

  chartDom!.style.width = props.centerchartsWidth;
  chartDom!.style.height = props.centerechartsHeight;
  console.log('3333333333333333333333333', chartDom);
  for (let i = 0; i < props.monthlyAllSalesInfo.length; i++) {
    xAxis.value[i] = props.monthlyAllSalesInfo[i].key;
    seriesData.value[i] = props.monthlyAllSalesInfo[i].data;
  }
  xAxis.value = xAxis.value.reverse();
  seriesData.value = seriesData.value.reverse();
  console.log('数据数据', xAxis.value);

  var myChart = echarts.init(chartDom);
  var option;

  option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
      },
    },
    xAxis: {
      type: 'category',
      data: xAxis.value,
    },
    yAxis: {
      type: 'value',
    },
    grid: {
      left: '3%',
      right: '3%',
      bottom: '4%',
      top: '6%',
      containLabel: true,
    },
    series: [
      {
        data: seriesData.value,
        type: 'bar',
        showBackground: false,
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {offset: 0, color: '#83bff6'},
            {offset: 0.5, color: '#188df0'},
            {offset: 1, color: '#188df0'},
          ]),
        },
        emphasis: {
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {offset: 0, color: '#2378f7'},
              {offset: 0.7, color: '#2378f7'},
              {offset: 1, color: '#83bff6'},
            ]),
          },
        },
      },
    ],
  };

  option && myChart.setOption(option);
});
</script>

<style scoped></style>
